@extends('home/layout')
@section('content')
<div style="background-color: #1C546B; margin-top:none;">
	<div class="container" style="width:900px;">
		<div style="height:80px;"></div>
		<div>
			<div id="c-body">
				<div style="height:550px;">
					<div style="height:60px"></div>
					<div class="text-center">
						<h2>设置新密码</h2>
					</div>
					<div style="height:30px"></div>
					<div class="text-center">
						<div style="height:20px;">{{ session('info') }}</div>
						<div id="e_input">
							<form action="{{ url('/home/user/renew') }}" method="post">
							{{ csrf_field() }}
								<input type="hidden" name="id" value="{{ $data -> id }}">
								<div class="form-group">
							    	<label class="sr-only" for="exampleInputEmail3"></label>
							    	<input name="password" id="regPwd" class="form-control input-lg" type="password" placeholder="新密码">
							  	</div>
							  	<p id="info"></p>
							  	<div class="form-group">
							    	<label class="sr-only" for="exampleInputEmail3"></label>
							    	<input name="towpassword" id="regTpwd" class="form-control input-lg" type="password" placeholder="确认新密码">
							  	</div>
							  	<p id="info2"></p>
							  	<button type="submit" class="btn btn-info">确认修改</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="height:50px;"></div>
	</div>
</div>

<style type="text/css">
#c-body
{
	width:900px;
	background-color:#fff;
}
#e_input
{
	width:500px;
	margin:0 auto;
}
#info
{
	height: 10px;
	color:red;
}
#info2
{
	height: 10px;
	color:red;
}

</style>
<script type="text/javascript">
	//正则匹配密码输入框
    $('input[id="regPwd"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        // console.log(v);
        //声明正则
        var reg = /^[a-z0-9_-]{6,20}$/;
        //验证
        var res = reg.test(v);
        //判断
        if(res)
        {
            $('#info').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#info').html('密码由6-20位数字，字母，下划线组成');
        }
    })
    //匹配两次密码是否相同
	$('input[id="regTpwd"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        var p = $('input[id="regPwd"]').attr('value');
        //判断
        if(v == p)
        {
            $('#info2').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#info2').html('两次密码不一致');
        }
    })
</script>
@endsection